<template>
  <!-- 主页 -->
  <div id="snap-svg" v-visibility-change="change" style="padding: 0; margin: 0; height: 100vh; width: 100%; overflow: hidden">
    <div style="position: absolute;width: 100%;">
      <el-table
        ref="table"
        :data="tableData"
        border
        size="mini"
        :row-style="{ height: '10px' }"
        :default-sort="{prop: 'date', order: 'descending'}"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; margin-bottom: 10px;"
      >
        <el-table-column prop="sender" :label="$t('text.Sender')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sender | senderLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskId" :label="$t('text.TaskId')" align="center" />
        <el-table-column prop="taskStatus" :label="$t('text.TaskStatus')" align="center">
          <template slot-scope="scope">
            {{ scope.row.taskStatus | taskStatusLabel }}
          </template>
        </el-table-column>
        <el-table-column prop="fromLoc" :label="$t('text.FromLoc')" align="center" />
        <el-table-column prop="toLoc" :label="$t('text.ToLoc')" align="center" />
        <el-table-column prop="unitId" :label="$t('text.UnitId')" align="center" />
        <!-- <el-table-column prop="extend" :label="$t('text.Extend')" align="center" /> -->
        <el-table-column prop="mainTaskType" :label="$t('text.MainTaskType')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.mainTaskType | mainTaskTypeLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="priority" :label="$t('text.Priority')" align="center" />
        <el-table-column prop="reasonCode" :label="$t('text.ReasonCode')" align="center" />
        <el-table-column align="center" width="70">
          <template slot-scope="scopedata">
            <el-button type="text" size="small" @click.native="moreTaskClick(scopedata.row)">更多</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div style="position: fixed;bottom:0">
      <img src="@/assets/images/SCADAtip.png" style="width:200px;" alt="">
    </div> -->
    <!-- con 等弹窗 输送机 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" top="1%" :visible.sync="conDialog" width="50%" @close="closeDialog">
      <el-button size="mini" type="success" @click="operateRun(dialogTitle,0)">{{ $t('button.Run') }}</el-button>
      <el-button size="mini" type="primary" @click="operateStop(dialogTitle,0)">{{ $t('button.Stop') }}</el-button>
      <el-button size="mini" type="danger" @click="operateRelieve(dialogTitle,0)">{{ $t('button.Unexception') }}</el-button>
      <el-button size="mini" type="primary" @click="ChangeInModeClick(particularsData)">搬入模式</el-button>
      <el-button size="mini" type="primary" @click="ChangeOutModeClick(particularsData)">搬出模式</el-button>
      <el-button size="mini" type="danger" @click="BlockPortClick(particularsData)">禁用</el-button>
      <el-button size="mini" type="primary" @click="UnBlockPortClick(particularsData)">启用</el-button>
      <el-button size="mini" type="info" @click="particularsClick(particularsData)">详情</el-button>
      <div style="display:flex;padding-top:10px">
        <div>
          <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
            <template v-if="key === 'agvMode' || key === 'mgvMode' || key === 'outputMode' || key === 'isGoods' || key === 'unitId'">
              <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
              <span style="margin-left: 30px; width: 120px; display: inline-block">{{ item }}</span>
            </template>
            <template v-if="key === 'bcDirection' ">
              <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
              <span style="margin-left: 30px; width: 120px; display: inline-block">{{ directionLabel(item) }}</span>
            </template>
          </p>

        </div>
        <!-- <div style="width:200px;height:300px;margin-left:30px">
          <template v-for="(item, key, index) in particularsData">
            <div v-if="key === 'input'" :key="index">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
            <div v-if="key === 'output'" :key="index" style="margin-top:20px">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
          </template>
        </div> -->
      </div>
    </el-dialog>
    <!-- srm点击弹窗 堆垛机 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="srmDialog" width="50%" @close="closeDialog">
      <el-button size="mini" type="success" @click="operateRun(dialogTitle,1)">{{ $t('button.Run') }}</el-button>
      <el-button size="mini" type="primary" @click="operateStop(dialogTitle,1)">{{ $t('button.Stop') }}</el-button>
      <el-button size="mini" type="danger" @click="operateRelieve(dialogTitle,1)">{{ $t('button.Unexception') }}</el-button>
      <el-button size="mini" type="primary" @click="ChangeInModeClick(particularsData)">搬入模式</el-button>
      <el-button size="mini" type="primary" @click="ChangeOutModeClick(particularsData)">搬出模式</el-button>
      <el-button size="mini" type="danger" @click="BlockPortClick(particularsData)">禁用</el-button>
      <el-button size="mini" type="primary" @click="UnBlockPortClick(particularsData)">启用</el-button>
      <div style="display:flex;padding-top:10px">
        <div>
          <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
            <template v-if="key !== 'input' && key !== 'output' &&key!='aisle'">
              <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
              <span style="margin-left: 30px; width: 120px; display: inline-block">{{ item }}</span>
            </template>
          </p>
        </div>
        <div style="width:200px;height:300px;margin-left:30px">
          <template v-for="(item, key, index) in particularsData">
            <div v-if="key === 'input'" :key="index">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
            <div v-if="key === 'output'" :key="index" style="margin-top:20px">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
    <!-- bcr弹窗 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="bcrDialog" width="50%">
      bcrDialog
    </el-dialog>
    <!-- 提升机设备弹窗 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="tsjDialog" width="50%" @close="closeDialog">
      <el-button v-permission="'SCADA-Run'" size="mini" type="success" @click="operateRun(dialogTitle,0)">{{ $t('button.Run') }}</el-button>
      <el-button v-permission="'SCADA-Stop'" size="mini" type="primary" @click="operateStop(dialogTitle,0)">{{ $t('button.Stop') }}</el-button>
      <el-button v-permission="'SCADA-Unexception'" size="mini" type="danger" @click="operateRelieve(dialogTitle,0)">{{ $t('button.Unexception') }}</el-button>
      <div style="display:flex;padding-top:10px">
        <div>
          <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
            <template v-if="key !== 'input' && key !== 'output'">
              <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
              <span style="margin-left: 30px; width: 120px; display: inline-block">{{ item }}</span>
            </template>
          </p>
        </div>
        <div style="width:200px;height:300px;margin-left:30px">
          <template v-for="(item, key, index) in particularsData">
            <div v-if="key === 'input'" :key="index">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
            <div v-if="key === 'output'" :key="index" style="margin-top:20px">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
    <!-- rgv 弹窗 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="rgvDialog" width="50%" @close="closeDialog">
      <el-button v-permission="'SCADA-Run'" size="mini" type="success" @click="operateRun(dialogTitle)">{{ $t('button.Run') }}</el-button>
      <el-button v-permission="'SCADA-Stop'" size="mini" type="primary" @click="operateStop(dialogTitle)">{{ $t('button.Stop') }}</el-button>
      <el-button v-permission="'SCADA-Unexception'" size="mini" type="danger" @click="operateRelieve(dialogTitle)">{{ $t('button.Unexception') }}</el-button>
      <el-button v-if="abnormal" v-permission="'SCADA-ViewException'" size="mini" type="danger">{{ $t('button.ViewException') }}</el-button>
      <div style="display:flex;padding-top:10px">
        <div>
          <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
            <template v-if="key !== 'input' && key !== 'output'">
              <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
              <span style="margin-left: 30px; width: 120px; display: inline-block">{{ item }}</span>
            </template>
          </p>
        </div>
        <div style="width:200px;height:300px;margin-left:30px">
          <template v-for="(item, key, index) in particularsData">
            <div v-if="key === 'input'" :key="index">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
            <div v-if="key === 'output'" :key="index" style="margin-top:20px">
              <div style="font-size: 16px;">{{ $t(`conText.`+key) }}:</div>
              <el-col v-for="(value,index1) in item" :key="index1" :span="3"><i class="iconfont el-icon-allocation-yuandian" :style="{color : value === '1'?'#67C23A':'red'}" /></el-col>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>

    <!-- 光栅的弹窗 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="rasterDialog" width="50%">
      <el-button @click="rasterClick">{{ particularsData.bypassFlag? '恢复': '禁用' }}</el-button>
      <p v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left">
        <template v-if="key !== 'name'">
          <span style="width: 150px; display: inline-block">{{ $t(`conText.`+key) }}</span>
          <i class="iconfont el-icon-allocation-yuandian" :style="{color : item?'#67C23A':'red'}" />
        </template>
      </p>
    </el-dialog>

    <!-- 手动搬送弹窗 -->
    <el-dialog v-el-drag-dialog title="手动搬送" :visible.sync="ManualTransportDialog" width="500px">
      <el-form v-model="ManualTransportData" label-width="120px" size="large">
        <el-row>
          <el-col>
            <el-form-item :label="$t('text.FromLoc')">
              <el-input v-model.trim="ManualTransportData.fromLoc" :placeholder="$t('text.FromLoc')" />
            </el-form-item>
            <el-form-item :label="$t('text.ToLoc')">
              <el-input v-model.trim="ManualTransportData.toLoc" :placeholder="$t('text.ToLoc')" />
            </el-form-item>
            <el-form-item label="条码">
              <el-select v-model="ManualTransportData.barCode" style="width:100%" placeholder="条码">
                <el-option label="EA1B" value="EA1B" />
                <el-option label="EA2B" value="EA2B" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-check">创建</el-button>
        <el-button type="info" icon="el-icon-close" @click="ManualTransportDialog=false">{{ $t('button.Cancel') }}</el-button>
      </span>
    </el-dialog>
    <!-- 路径配置 -->
    <el-dialog v-el-drag-dialog title="路径配置" :visible.sync="RouteDialog" width="1151px" top="2vh">
      <el-form v-model="RouteData" label-width="120px" size="large">
        <el-row>
          <!-- <el-col :span="7" style="margin-right: 15px">
            <el-form-item label="字段名">
              <el-input v-model.trim="RouteData.nodeName" placeholder="" />
            </el-form-item>
          </el-col> -->
          <searchbutton :isopen="isopen" :is-show-open="false" @isopenclickfn="isopenclick" @resetQueryfn="RouteResetQuery" @queryClickfn="RouteQueryClick" />
        </el-row>
      </el-form>
      <el-button type="primary" style="margin-bottom:5px;margin-top:-12px" @click="AddRouteClick">新增路径</el-button>
      <el-table
        :data="RouteTableData"
        height="500px"
        border
        :row-style="{ height: '40px' }"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; margin-bottom: 30px"
      >
        <el-table-column width="90" align="center">
          <template slot-scope="scopedata">
            <el-button type="text" size="small" @click.native="UpdateRouteClick(scopedata.row)"><i class="el-icon-edit" style="font-size:16px" /></el-button>
            <el-button type="text" size="small" @click.native="DeleteRouteClick(scopedata.row)"><i class="el-icon-delete" style="font-size:16px;color:red;" /></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="from" label="from" align="center" width="120" />
        <el-table-column prop="to" label="to" align="center" width="120" />
        <el-table-column prop="from4PLC" label="from4PLC" align="center" width="120" />
        <el-table-column prop="to4PLC" label="to4PLC" align="center" width="120" />
        <el-table-column prop="from4Customer" label="from4Customer" align="center" width="140" />
        <el-table-column prop="to4Customer" label="to4Customer" align="center" width="120" />
        <el-table-column prop="taskType" label="taskType" align="center" width="120">
          <template slot-scope="scope">
            {{ taskTypeLabel(scope.row.taskType) }}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="enabled" align="center" width="160">
          <template slot-scope="scope">
            <!-- {{ scope.row.enabled }} -->
            <el-switch
              v-model="scope.row.enabled"
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="enabledChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 新增路径 -->
    <el-dialog v-el-drag-dialog title="新增路径" :visible.sync="AddRouteDialog" width="400px">
      <el-form v-model="AddRouteData" label-width="100px" size="large">
        <el-row>
          <el-form-item label="from">
            <el-input v-model.trim="AddRouteData.from" placeholder="from" />
          </el-form-item>
          <el-form-item label="to">
            <el-input v-model.trim="AddRouteData.to" placeholder="to" />
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddRouteDialog = false">{{ $t('button.Cancel') }}</el-button>
        <el-button type="primary" @click="AddRouteConfirm">{{ $t('button.Confirm') }}</el-button>
      </span>
    </el-dialog>

    <!-- 修改路径 -->
    <el-dialog v-el-drag-dialog title="修改路径" :visible.sync="UpdateRouteDialog" width="500px" top="2vh">
      <el-form v-model="UpdateRouteData" label-width="120px" size="large">
        <el-row>
          <el-form-item label="from4PLC">
            <el-input v-model.trim="UpdateRouteData.from4PLC" placeholder="from4PLC" />
          </el-form-item>
          <el-form-item label="to4PLC">
            <el-input v-model.trim="UpdateRouteData.to4PLC" placeholder="to4PLC" />
          </el-form-item>
          <el-form-item label="from4Customer">
            <el-input v-model.trim="UpdateRouteData.from4Customer" placeholder="from4Customer" />
          </el-form-item>
          <el-form-item label="to4Customer">
            <el-input v-model.trim="UpdateRouteData.to4Customer" placeholder="to4Customer" />
          </el-form-item>
          <el-form-item label="taskType">
            <!-- <el-input v-model.trim="UpdateRouteData.taskType" placeholder="taskType" /> -->
            <el-select v-model="UpdateRouteData.taskType" style="width:100%">
              <el-option label="移动" :value="1" />
              <el-option label="取货" :value="2" />
              <el-option label="卸货" :value="4" />
              <el-option label="取货后再卸货" :value="8" />
            </el-select>
          </el-form-item>
          <el-form-item label="enabled">
            <el-select v-model="UpdateRouteData.enabled" style="width:100%">
              <el-option :value="true">true</el-option>
              <el-option :value="false">false</el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="UpdateRouteDialog = false">{{ $t('button.Cancel') }}</el-button>
        <el-button type="primary" @click="UpdateRouteConfirm">{{ $t('button.Confirm') }}</el-button>
      </span>
    </el-dialog>

    <!-- 任务 -->
    <el-dialog v-el-drag-dialog title="任务" :visible.sync="taskDialog" width="80%" top="2vh">
      <el-form v-model="taskData" label-width="120px" size="large">
        <el-row>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item :label="$t('text.FromLoc')">
              <el-input v-model.trim="taskData.fromLoc" :placeholder="$t('text.FromLoc')" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item :label="$t('text.ToLoc')">
              <el-input v-model.trim="taskData.toLoc" :placeholder="$t('text.ToLoc')" />
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-right: 15px">
            <el-form-item :label="$t('text.UnitId')">
              <el-input v-model.trim="taskData.unitId" :placeholder="$t('text.UnitId')" />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-right: 15px">
            <el-form-item :label="$t('text.Time')">
              <el-date-picker
                v-model="timestart_end"
                style="width:100%"
                type="datetimerange"
                :start-placeholder="$t('text.StartTime')"
                :end-placeholder="$t('text.EndTime')"
                format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy/MM/dd HH:mm:ss"
                range-separator="-"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleDataChanged"
              />
            </el-form-item>
          </el-col>
          <searchbutton :isopen="taskisopen" :is-show-open="false" @isopenclickfn="taskisopenclick" @resetQueryfn="taskresetQuery" @queryClickfn="taskqueryClick" />
        </el-row>
      </el-form>
      <el-button type="primary" style="margin-bottom:5px;margin-top:-12px" @click="taskCreateClick">{{ $t('button.CreateTask') }}</el-button>
      <el-table
        :data="taskTableData"
        height="500px"
        border
        :row-style="{ height: '40px' }"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; margin-bottom: 30px; overflow: auto"
      >
        <el-table-column width="90" align="center">
          <template slot-scope="scopedata">
            <!-- <el-button type="text" size="small" @click.native="taskResumeHandle(scopedata.row)">开始</el-button> -->
            <el-button type="text" size="small" @click.native="taskResumePause(scopedata.row)">{{ scopedata.row.taskStatus ==='Pause'?'继续':'暂停' }}</el-button>
            <el-button type="text" size="small" @click.native="taskhandleDelete(scopedata.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sender" :label="$t('text.Sender')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sender | senderLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskId" :label="$t('text.TaskId')" align="center" />
        <el-table-column prop="fromLoc" :label="$t('text.FromLoc')" align="center" />
        <el-table-column prop="toLoc" :label="$t('text.ToLoc')" align="center" />
        <el-table-column prop="unitId" :label="$t('text.UnitId')" align="center" />
        <el-table-column prop="priority" :label="$t('text.Priority')" align="center">
          <template slot-scope="scope">
            {{ scope.row.priority }} <el-button type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="extend" :label="$t('text.Extend')" align="center" /> -->
        <!-- <el-table-column prop="reasonCode" :label="$t('text.ReasonCode')" align="center" /> -->
        <el-table-column prop="mainTaskType" :label="$t('text.MainTaskType')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.mainTaskType | mainTaskTypeLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskStatus" :label="$t('text.TaskStatus')" align="center">
          <template slot-scope="scope">
            {{ scope.row.taskStatus | taskStatusLabel }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('text.createTime')" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="lastUpdateTime" :label="$t('text.LastUpdateTime')" align="center">
          <template slot-scope="scope">
            {{ scope.row.lastUpdateTime | formatDate }}
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页组件 -->
      <paging :pagion-obj="taskPagionObj" :handle-size-change="taskSizeChange" :handle-page-change="taskPageChange" />
    </el-dialog>

    <!-- 创建任务 -->
    <el-dialog v-el-drag-dialog title="创建任务" :visible.sync="createTaskDialog" width="400px" @close="createTaskClose">
      <el-form v-model="createTaskData" label-width="100px" size="large">
        <el-row>
          <el-form-item label="fromLoc">
            <el-input v-model.trim="createTaskData.fromLoc" placeholder="fromLoc" />
          </el-form-item>
          <el-form-item label="toLoc">
            <el-input v-model.trim="createTaskData.toLoc" placeholder="toLoc" />
          </el-form-item>
          <el-form-item label="unitId">
            <el-input v-model.trim="createTaskData.unitId" placeholder="unitId" />
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createTaskClose">{{ $t('button.Cancel') }}</el-button>
        <el-button type="primary" @click="createTaskConfirm">{{ $t('button.Confirm') }}</el-button>
      </span>
    </el-dialog>
    <!-- port管理 -->
    <el-dialog v-el-drag-dialog title="PORT Manage" :visible.sync="portManageDialog" width="1000px" @close="portManageClose">
      <el-table
        :data="portManageData"
        height="500px"
        border
        :row-style="{ height: '40px' }"
        :cell-style="{ padding: '0px' }"
        style="width: 100%; margin-bottom: 30px; overflow: auto"
      >
        <el-table-column prop="portName" label="port名" align="center" />
        <el-table-column prop="machineName" label="机台名" align="center" />
        <el-table-column prop="mcsDirection" label="MCS方向" align="center">
          <template slot-scope="scope">
            {{ directionLabel(scope.row.mcsDirection) }}
          </template>
        </el-table-column>
        <el-table-column prop="lfcDirection" label="LFC方向" align="center">
          <template slot-scope="scope">
            {{ directionLabel(scope.row.lfcDirection) }}
          </template>
        </el-table-column>
        <el-table-column prop="bcDirection" label="设备方向" align="center">
          <template slot-scope="scope">
            {{ directionLabel(scope.row.bcDirection) }}
          </template>
        </el-table-column>
        <el-table-column width="140" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ChangeInModeClick(scope.row)">搬入模式</el-button>
            <el-button type="text" size="small" @click="ChangeOutModeClick(scope.row)">搬出模式</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="portState" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.portState===1?"启用":"禁用" }}
          </template>
        </el-table-column>
        <el-table-column width="90" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="BlockPortClick(scope.row)">禁用</el-button>
            <el-button type="text" size="small" @click="UnBlockPortClick(scope.row)">启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <PortManageVue :port-manage-dialog="portManageDialog" :port-manage-data="portManageData" @portManageClosefn="portManageClose" /> -->
    <!--  -->

    <el-dialog v-el-drag-dialog :visible.sync="particularsDialog" width="1400px" top="2vh">
      <div style="display:flex; flex-wrap: wrap;justify-content: flex-start; height:700px;overflow:auto">
        <div v-for="(item, key, index) in particularsData" :key="index" style="font-size: 16px; text-align: left;">
          <template v-if="key !== 'lfcDirection' && key!=='bcDirection'">
            <span style="width: 170px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
            <span style="margin-left: 30px; width: 220px; display: inline-block">{{ item }}</span>
          </template>
          <template v-else>
            <span style="width: 170px; display: inline-block">{{ $t(`conText.`+key) }} :</span>
            <span style="margin-left: 30px; width: 220px; display: inline-block">{{ directionLabel(item) }}</span>
          </template>
        </div>
      </div>
    </el-dialog>
    <svg id="svg" />
    <ScadaMap_container :control-model="controlModel" @portManageClickfn="portManageClick" @ManualTransportClickfn="ManualTransportClick" @QueryRouteClickfn="QueryRouteClick" />
  </div>
</template>

<script>
const signalR = require('@microsoft/signalr')
import elDragDialog from '@/components/el-drag-dialog' // base on element-ui
import permission from '@/permission/index.js' // 权限判断指令
import lineTime from './lineTime.vue'
import {
  QueryRouteApi,
  AddRouteApi,
  DeleteRouteApi,
  UpdateRouteApi,
  SetEnabledRouteApi
} from '@/api/config'
import {
  QueryTaskApi,
  DeleteTaskApi,
  CreateTaskApi,
  PauseTaskApi,
  ResumeTaskApi,
  ChangePriorityApi
} from '@/api/task'
import { InitSvg, HandleSingalRData, clear } from './SvgLayout.js'
import {
  GetDeviceDataApi,
  HandleDeviceOperate,
  ResetBypassApi,
  SetBypassApi,
  ChangePortStateApi,
  SrmReturnHomeApi,
  GetPortList,
  ChangeInMode,
  ChangeOutMode,
  BlockPort,
  UnBlockPort
} from '@/api/dashboard'
import { Message } from 'element-ui'
import ScadaMap_container from './map-container/index'
import PortManageVue from './dialog/PortManage.vue'
export default {
  name: 'Dashboard',
  directives: { elDragDialog, permission },
  components: {
    ScadaMap_container,
    lineTime,
    PortManageVue
  },
  data() {
    return {
      dialogTitle: '',
      conDialog: false,
      isActive: true,
      /** 是否显示空取 或者二重按钮 */
      errorCode: 0,
      dialogOption: 0, // 0：输送机，1：堆垛机，2：灯
      /** 详情数据 */
      particularsData: {},
      // MES是否在线
      MESIsonline: 1,
      // WCS是否在线
      WCSIsonline: 1,
      // 点击的灯的数据
      IOPortData: '',
      // 详情
      particularsDialog: false,
      // 禁用按钮
      disableClickShow: false,
      // 设备是否异常
      abnormal: false,
      // srm点击的弹窗
      srmDialog: false,
      // blc设备点击弹窗
      bcrDialog: false,
      // 提升机设备点击弹窗
      tsjDialog: false,
      // rgv 设备点击弹窗
      rgvDialog: false,
      // 光栅的弹窗
      rasterDialog: false,
      // loding效果显示
      listLoading: true,
      // 表格任务数据
      tableData: [],
      // 手动搬送弹窗及数据
      ManualTransportDialog: false,
      ManualTransportData: {
        fromLoc: '',
        toLoc: '',
        barCode: ''
      },
      // 路径配置的弹窗及数据
      RouteDialog: false,
      RouteData: {},
      RouteTableData: [],
      isopen: false,
      AddRouteDialog: false,
      AddRouteData: {
        from: '',
        to: ''
      },
      UpdateRouteDialog: false,
      UpdateRouteData: {
        'id': 0,
        'from4PLC': '',
        'to4PLC': '',
        'from4Customer': '',
        'to4Customer': '',
        'taskType': 1,
        'enabled': true
      },
      // 时间的数据
      timestart_end: [],
      // 任务页面弹窗及数据
      taskDialog: false,
      taskData: {
        'page': 0,
        'size': 0,
        startTime: '0001/1/1 0:00:00', // 开始日期
        endTime: '0001/1/1 0:00:00', // 结束日期
        'fromLoc': '',
        'toLoc': '',
        'unitId': ''
      },
      taskisopen: false,
      taskLoading: true,
      createTaskData: {
        'fromLoc': '',
        'toLoc': '',
        'unitId': ''
      },
      createTaskDialog: false,
      taskTableData: [],
      taskPagionObj: {
        size: 10,
        currentPage: 1,
        total: 100
      },
      // 控制模式区数据
      controlModel: {
        SystemStatus: '',
        MCSStatus: '',
        PLCStatus: '',
        User: '',
        Ver: ''
      },
      // portManage弹窗和数据
      portManageDialog: false,
      portManageData: [],
      portManagetime: ''
    }
  },
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.taskData.startTime = this.timestart_end[0]
        this.taskData.endTime = this.timestart_end[1]
      } else {
        this.taskData.startTime = '0001/1/1 0:00:00'
        this.taskData.endTime = '0001/1/1 0:00:00'
      }
    }
  },
  mounted() {
    InitSvg(this)
    setTimeout(() => {
      this.bindSingalRData()
    }, 500)
  },
  beforeDestroy() {
    clear()
    // console.log('beforeDestroy')
    this.$signalR.off('WcsMoniorData')
    this.$signalR.offPush('PushModeStatus')
  },
  activated() {
    this.bindSingalRData()
    this.isActive = true
    // console.log('activated')
  },
  deactivated() {
    this.$signalR.off('WcsMoniorData')
    this.$signalR.offPush('PushModeStatus')
    this.isActive = false
    // console.log('deactivated')
  },
  methods: {
    /** 标签切换事件(v-visibility-change="change") */
    change(evt, hidden) {
      // hidden：false切换回当前页面，true切换到别的页面
      // console.log(hidden, this.isActive)
      if (hidden) {
        this.$signalR.off('WcsMoniorData')
        this.$signalR.offPush('PushModeStatus')
      } else {
        if (this.isActive) {
          this.bindSingalRData()
        }
      }
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.taskData.startTime = this.timestart_end[0]
        this.taskData.endTime = this.timestart_end[1]
      } else {
        this.taskData.startTime = '0001/1/1 0:00:00'
        this.taskData.endTime = '0001/1/1 0:00:00'
      }
    },
    /** 绑定后端SingalR数据 */
    bindSingalRData() {
      this.$signalR.on('MoniorData', (data) => {
        // const dataObj = JSON.parse(data)
        HandleSingalRData(data)
      })
      // this.$signalR.onPush('PushModeStatus', (data) => {})
    },
    // 运行
    operateRun(deviceName, deviceType) {
      if (deviceType === 1) {
        HandleDeviceOperate(deviceName, this, deviceType, 6)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 3)
      }
    },
    // 停止
    operateStop(deviceName, deviceType) {
      if (deviceType === 1) {
        HandleDeviceOperate(deviceName, this, deviceType, 7)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 4)
      }
    },
    // 解除异常
    operateRelieve(deviceName, deviceType) {
      if (deviceType === 1) {
        HandleDeviceOperate(deviceName, this, deviceType, 8)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 5)
      }
    },
    PMClick(deviceName, deviceType) {
      if (this.particularsData.pconMode === 5) {
        HandleDeviceOperate(deviceName, this, deviceType, 13)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 12)
      }
    },
    // 禁用按钮
    disableClick(deviceName, deviceType) {
      console.log('禁用按钮')
      if (deviceType === 1) {
        if (this.particularsData.enabled) {
          HandleDeviceOperate(deviceName, this, deviceType, 9)
        } else {
          HandleDeviceOperate(deviceName, this, deviceType, 15)
        }
      } else {
        if (this.particularsData.enabled) {
          HandleDeviceOperate(deviceName, this, deviceType, 13)
        } else {
          HandleDeviceOperate(deviceName, this, deviceType, 12)
        }
      }
    },
    BCRClick(deviceName, deviceType) {
      if (this.particularsData.bcrState === 1) {
        HandleDeviceOperate(deviceName, this, deviceType, 11)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 12)
      }
    },
    ServoClick(deviceName, deviceType) {
      if (this.particularsData.servoState === 1) {
        HandleDeviceOperate(deviceName, this, deviceType, 14)
      } else {
        HandleDeviceOperate(deviceName, this, deviceType, 13)
      }
    },
    // 返回原点
    async ReturnHome(deviceName, deviceType) {
      await SrmReturnHomeApi({
        machineName: deviceName.substring(0, 8),
        portName: deviceName.substring(9, 11)
      })
      Message.success('操作成功')
    },
    // UR按钮
    async URClick(deviceName, deviceType) {
      await ChangePortStateApi({
        machineName: deviceName.substring(0, 8),
        portName: deviceName.substring(9, 11)
      })
      Message.success('操作成功')
    },
    // 切换入库模式
    async InboundClick(deviceName, deviceType) {
      HandleDeviceOperate(deviceName, this, deviceType, 6)
    },
    // 切换出库模式
    async OutboundClick(deviceName, deviceType) {
      HandleDeviceOperate(deviceName, this, deviceType, 7)
    },
    // 关闭dialog
    closeDialog() {
      this.disableClickShow = false
      this.particularsData = {}
    },
    // raster设备点击按钮
    async rasterClick() {
      if (this.particularsData.bypassFlag) {
        await ResetBypassApi(this.particularsData)
        Message.success(this.$t('text.OperateSuccessfully'))
      } else {
        await SetBypassApi(this.particularsData)
        Message.success(this.$t('text.OperateSuccessfully'))
      }
    },
    // 手动搬送
    ManualTransportClick() {
      this.ManualTransportDialog = true
    },
    // 路径配置
    async QueryRouteClick() {
      this.RouteDialog = true
      // const res = await QueryRouteApi(this.queryObj)
      const res = await QueryRouteApi()
      this.RouteTableData = res.data.data
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },
    // 路径配置的重置按钮
    RouteResetQuery() {
      this.QueryRouteClick()
    },
    // 路径配置的搜索
    RouteQueryClick() {
      this.QueryRouteClick()
    },
    // taskType字段中文转换
    taskTypeLabel(data) {
      let label = ''
      switch (data) {
        case 1:
          label = '移动'
          break
        case 2:
          label = '取货'
          break
        case 4:
          label = '卸货'
          break
        case 8:
          label = '取货后再卸货'
          break
        default:
          break
      }
      return label
    },
    // 创建路径
    AddRouteClick() {
      this.AddRouteDialog = true
    },
    // 创建路径的确认
    async AddRouteConfirm() {
      await AddRouteApi(this.AddRouteData)
      Message.success('操作成功')
      this.QueryRouteClick()
      this.AddRouteDialog = false
    },
    // 禁用启用
    async enabledChange(data) {
      // console.log(data)
      await SetEnabledRouteApi({ id: data.id, enabled: data.enabled })
      Message.success('操作成功')
    },
    // 修改路径
    UpdateRouteClick(data) {
      this.UpdateRouteDialog = true
      // this.UpdateRouteData = data
      this.UpdateRouteData.id = data.id
      this.UpdateRouteData.from4PLC = data.from4PLC
      this.UpdateRouteData.to4PLC = data.to4PLC
      this.UpdateRouteData.from4Customer = data.from4Customer
      this.UpdateRouteData.to4Customer = data.to4Customer
      this.UpdateRouteData.taskType = data.taskType
      this.UpdateRouteData.enabled = data.enabled
    },
    // 修改路径的确认
    async UpdateRouteConfirm() {
      await UpdateRouteApi(this.UpdateRouteData)
      Message.success('操作成功')
      this.QueryRouteClick()
      this.UpdateRouteDialog = false
    },
    // 删除路径
    async  DeleteRouteClick(data) {
      this.$confirm('确认删除该路径吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await DeleteRouteApi({ id: data.id })
        this.QueryRouteClick()
        Message.success('操作成功')
      })
    },
    // 任务页面
    async moreTaskClick() {
      this.taskDialog = true
      this.taskData.size = this.taskPagionObj.size
      this.taskData.page = this.taskPagionObj.currentPage
      const res = await QueryTaskApi(this.taskData)
      this.taskTableData = res.data.data
      this.taskPagionObj.pageCount = res.data.pageCount
      this.taskPagionObj.total = res.data.count
    },
    // 任务展开收起
    taskisopenclick() {
      this.taskisopen = !this.taskisopen
    },
    // 任务页面的重置
    taskresetQuery() {
      this.taskData.fromLoc = ''
      this.taskData.toLoc = ''
      this.taskData.unitId = ''
      this.timestart_end = []
    },
    // 任务页面的搜索
    taskqueryClick() {
      this.moreTaskClick()
    },
    taskSizeChange(val) {
      this.taskPagionObj.size = val
      this.queryData()
    },
    taskPageChange(val) {
      this.taskPagionObj.currentPage = val
      this.queryData()
    },
    // 创建任务按钮
    taskCreateClick() {
      this.createTaskDialog = true
    },
    // 创建任务的取消
    createTaskClose() {
      this.createTaskDialog = false
      this.createTaskData.fromLoc = ''
      this.createTaskData.toLoc = ''
      this.createTaskData.unitId = ''
    },
    // 创建任务的确认
    async createTaskConfirm() {
      await CreateTaskApi(this.createTaskData)
      Message.success('操作成功')
      this.createTaskDialog = false
      this.moreTaskClick()
    },
    // 暂停继续
    async taskResumePause(data) {
      this.$confirm('确认执行该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (data.taskStatus === 'Pause') {
          await ResumeTaskApi({ id: data.id })
        } else {
          await PauseTaskApi({ id: data.id })
        }
        Message.success('操作成功')
        this.moreTaskClick()
      })
    },
    // 删除任务
    taskhandleDelete(data) {
      this.$confirm('确认删除该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await DeleteTaskApi({ id: data.id })
        Message.success('操作成功')
        setTimeout(() => {
          this.moreTaskClick()
        }, 1000)
      })
    },
    // port管理
    async portManageClick() {
      this.portManageDialog = true
      this.portManagetime = setInterval(async() => {
        const res = await GetPortList()
        this.portManageData = res.data.data
      }, 1000)
    },
    // port管理弹窗关闭
    portManageClose() {
      clearInterval(this.portManagetime)
      this.portManageDialog = false
    },
    // 方向字段切换
    directionLabel(data) {
      let label = ''
      switch (data) {
        case 1:
          label = '搬入模式'
          break
        case 2:
          label = '搬出模式'
          break
        case 3:
          label = '双向模式'
          break
        default:
          label = '-'
          break
      }
      return label
    },
    // port管理搬入按钮
    async ChangeInModeClick(data) {
      this.$confirm('确认执行此操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await ChangeInMode({ 'deviceName': data.deviceName })
        Message.success('操作成功')
      })
    },
    // port管理搬出按钮
    async ChangeOutModeClick(data) {
      this.$confirm('确认执行此操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await ChangeOutMode({ 'deviceName': data.deviceName })
        Message.success('操作成功')
      })
    },
    // port管理禁用按钮
    async BlockPortClick(data) {
      this.$confirm('确认执行此操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await BlockPort({ 'deviceName': data.deviceName })
        Message.success('操作成功')
      })
    },
    // port管理启用按钮
    async UnBlockPortClick(data) {
      this.$confirm('确认执行此操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await UnBlockPort({ 'deviceName': data.deviceName })
        Message.success('操作成功')
      })
    },
    // 详情
    particularsClick() {
      this.particularsDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
#svg {
  width: 100%;
  height: 100%;
  background-color: #100c38;

}
</style>

